<template>
	<view class="index1_content">
		<view class="search-header">
			<view @click="handeleTo">
				<image style="width: 15rpx;height: 30rpx;" src="@/static/index2/index7.png" mode=""></image>
			</view>
			<view style="color: #FFFFFF;font-size: 32rpx;margin-right: 10rpx;">{{$t(title)}}</view>
			<view></view>
		</view>
		<view class="new-block">

			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
						mode=""></image>
					<view>{{$t('仓库名称')}}</view>
				</view>
				<u-input v-model="model.name" :placeholder="$t('请输入仓库名称')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view>
			<!-- <view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
						mode=""></image>
					<view>{{$t('仓库编码')}}</view>
				</view>
				<u-input v-model="model.code" :disabled="isdisabled" :placeholder="$t('请输入仓库编码')"
					style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;" input-align="right"></u-input>
			</view> -->
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
						mode=""></image>
					<view>{{$t('仓库面积')}}
						<span class="square" v-if="lang=='zh'">（{{$t("平方米")}}）</span>
						<span class="square" v-else>{{$t("平方米")}}</span>
					</view>
				</view>
				<u-input v-model="model.square" type="number" :placeholder="$t('请输入仓库面积')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>

			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
						mode=""></image>
					<view>{{$t('仓库类型')}}</view>
				</view>
				<u-input v-model="model.brand" :placeholder="$t('请输入仓库类型')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
						mode=""></image>
					<view>{{$t('当前所在区域')}}</view>
				</view>
				<view style="text-align: right;">
					<formCity style="width: 100%;" :texthidden="true" :is_register="1" :item="cityItemState"
						:is_port="true" @change="selCityState" @zzc='selectzzc' :label="textEnd" />
				</view>
				<!-- <u-input style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;" input-align="right"></u-input> -->
			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
						mode=""></image>
					<view>{{$t('详细地址')}}</view>
				</view>
				<u-input v-model="model.address" auto-height type="textarea" :placeholder="$t('请输入详细地址')"
					style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;color: #999999;"
					input-align="right"></u-input>
			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<!-- <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png" mode=""></image> -->
					<view>{{$t('仓库备注')}}</view>
				</view>
				<u-input v-model="model.remark" :placeholder="$t('请输入备注信息')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<!-- <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png" mode=""></image> -->
					<view>{{$t('仓库状态')}}</view>
				</view>
				<u-switch size="35" v-model="model.status" active-value="1" inactive-value="0"></u-switch>
			</view>
			<!-- 	<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<view>{{$t('货位名称(可添加多个)')}}</view>
				</view>
				<u-input style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;color: #999999;"
					input-align="right"></u-input>
			</view> -->
		</view>
		<view class="new-but" @click="handeleSubmit">{{$t('保存')}}</view>
		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 690rpx;position: absolute;top: 0;z-index: 1;"
			src="@/static/index2/20241101130857.png" mode=""></image>
	</view>
</template>

<script>
	import formCity from './components/formCitys.vue'
	import CitySelect from './components/citySelect.vue'
	import validate from "./utils/validate.js"
	export default {
		components: {
			formCity
		},
		data() {
			return {
				title: this.$t("新建仓库"),
				lang: uni.getStorageSync("lang"),
				isdisabled: true,
				textEnd: this.$t('所在城市'),
				model: {
					user_id: uni.getStorageSync("user_id"),
					name: "", //仓库名称
					square: "", //面积
					brand: "", //仓库类型
					city_id: "", //所在城市
					address: "", //具体位置
					remark: "", //备注
					status: true, //仓库状态
				},
				fields: {
					name: {
						title: this.$t("仓库名称"),
						required: true,
						min: 2,
						max: 20
					},
					square: {
						title: this.$t("仓库面积"),
						required: true,
						min: 1,
						max: 10
					},
					brand: {
						title: this.$t("仓库类型"),
						required: true,
						min: 2,
						max: 10
					},
					city_id: {
						title: this.$t("所在城市"),
						required: true,
					},
					address: {
						title: this.$t("具体位置"),
						required: true,
						min: 2,
						max: 50
					}
				},
				operation: '', //当前操作类型
				loading: false,
				cityItemState: {
					key: "city_id",
					label: false,
					placeholder: this.$t('所在城市'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
			}
		},
		onLoad(options) {



			if (options.item) {
				this.title = this.$t("编辑") + this.$t("仓库")
				const item = JSON.parse(options.item)
				console.log(item)
				for (let key in item) {
					if (key == 'city_id') {
						this.textEnd = item.area.mergename
					}

					if (key == 'status') {
						this.model[key] = item[key] == 1
					} else {
						this.model[key] = item[key]
					}
				}
			}
		},
		methods: {
			// 所在城市
			selCityState(key, value) {
				this.textEnd = `${value[0].label},${value[1].label},${value[2].label}`;
				this.model.city_id = value[2].value;
			},
			selectzzc(value) {
				if (value == 1) {
					// this.showMask=false
				}
			},
			// 保存
			handeleSubmit() {
				if (this.loading) return

				if (!validate(this.fields, this.model, this)) return

				//格式化部分参数
				const formData = JSON.parse(JSON.stringify(this.model))
				formData.status = formData.status ? 1 : 0
				uni.showLoading({
					title: this.$t("正在提交"),
					mask: true
				})
				this.loading = true
				this.$u.api.basic.warehouseSave(formData).then(res => {
					uni.showToast({
						title: res.create_at ? this.$t("操作成功") : this.$t("操作失败"),
						icon: res.create_at ? "success" : "error"
					})
					if (res.create_at) {
						setTimeout(() => {
							uni.navigateBack()
							uni.hideLoading()
							this.loading = false
						}, 1500)
					} else {
						this.loading = false
					}
				}).catch(()=>{
					this.loading = false
				})

			},
			// 当前所在区域
			citySelectCbEnd(e) {
				console.log("e====", e)
				this.textEnd = e.column3.label;
				this.model.city_id = e.column3.value;
			},
			handeleTo() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.uni-input-placeholder {
		color: #999;
	}

	.new-but {
		width: 540rpx;
		height: 90rpx;
		border-radius: 90rpx;
		color: #FFFFFF;
		background: #5282E6;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
		margin-top: 42rpx;
	}

	.square {
		margin-left: 8rpx;
		font-size: 28rpx;
		color: #666;
		font-size: 22rpx;
	}

	.new-block1 {
		font-weight: normal;
		font-size: 24rpx;
		width: 100%;
		min-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1D1D1D;
		border-bottom: 1rpx solid #D8D8D8;
	}

	.new-block {
		z-index: 2;
		width: 690rpx;
		min-height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		padding: 15rpx 30rpx 45rpx 30rpx;
		box-sizing: border-box;
	}

	.search-header {
		z-index: 2;
		width: 690rpx;
		height: 133rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.index1_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* height: 100vh; */
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #F1F2F4;
	}
</style>